---
title: Lista horizontal
description: Una guía para usar Fluid DnD con una simple lista horizontal.
---

import {SingleHorizontalList} from "@/components/react/SingleHorizontalList.tsx";
import { Code } from "@astrojs/starlight/components";

### Ejemplo de lista de números

En este ejemplo vamos usar **Fluid DnD** para ordernar una lista horizontal.
Primero, vamos a crear una lista de números y vamos añadir el propiedad `direction` con valor igual `horizontal`:

export const highlightsListOfNumbers = ['direction: "horizontal"'];


export const listOfNumbers = `export const SingleHorizontalList: React.FC = () => {
  const [ parent, listValue ] = useDragAndDrop<number, HTMLDivElement>([1, 2, 3, 4, 5],{
      direction: "horizontal"
  });`;

<Code code={listOfNumbers} lang="tsx" mark={highlightsListOfNumbers}/>

### Creando la vista

export const highlightsDnD = ['direction="horizontal"','.number-list'];

export const listOfNumberInsideDnD = `
return (
        <div ref={parent} className="number-list">
            {listValue.map((element, index) => (
                <div className="number" data-index={index} key={element}>
                    {element}
                </div>
            ))}
        </div>
    )
};
`;

<Code code={listOfNumberInsideDnD} lang="tsx" mark={highlightsDnD} />

### Resultado

<div class="p-8 bg-[var(--sl-color-gray-6)]">
  <SingleHorizontalList client:load />
</div>
